<template>
  <div>
    <redis-serializer-chose ref="serializerChose" v-model="input.serializerParam" />

    <el-form :inline="true" @submit.native.prevent>
      <el-form-item>
        <el-checkbox v-model="input.search.wildcardLeft">左模糊</el-checkbox>
        <el-checkbox v-model="input.search.wildcardRight">右模糊</el-checkbox>
        <el-checkbox v-model="input.search.fast">单KEY</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="input.keyScanParam.pattern"
          style="width: 380px"
          size="small"
          placeholder="输入 key 发起搜索"
          clearable
          suffix-icon="el-icon-search"
          @keyup.enter.native="scanKey"
        />
      </el-form-item>
      <el-form-item label="超时(ms)">
        <el-input v-model="input.search.timeout" :disabled="input.search.fast" size="small" style="width: 60px" />
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="danger" @click="dropChoseKeys">批量删除</el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <el-col :span="15">
        <el-table
          ref="keyScanTable"
          v-loading="loading"
          :data="keyScanResult.keys"
          border
          stripe
          style="width: 100%"
          size="mini"
          height="500"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            type="index"
            width="50"
          />
          <el-table-column
            prop="type"
            label="type"
            width="90"
          />
          <el-table-column
            prop="key"
            label="key"
            width="450"
          />
          <el-table-column
            prop="ttl"
            label="ttl"
            width="90"
          />
          <el-table-column
            prop="length"
            label="length"
          />

          <el-table-column
            prop="pttl"
            label="pttl"
            width="90"
          />
          <el-table-column
            prop="slot"
            label="slot"
            width="100"
          />

          <el-table-column
            fixed="right"
            label="操作"
            width="150"
          >
            <template slot-scope="scope">
              <el-button type="text" class="text-danger" size="small" @click="dropKeys(scope.row.key)">删除</el-button>
              <el-button type="text" size="small" @click="readData(scope.row)">数据</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button-group>
          <el-button plain size="mini" icon="el-icon-coordinate" @click="resetScan">重置</el-button>
          <el-button plain size="mini" :disabled="keyScanResult.done" icon="el-icon-arrow-right" @click="nextPage">下一页</el-button>
        </el-button-group>
        cursor: {{ keyScanResult.cursor || 0 }} nodeId: {{ keyScanResult.nodeId }}
      </el-col>

      <!-- 数据展示区 -->
      <el-col :span="9" class="padding-little-left data-show">
        <datashow ref="datashow" :key-row="keyRow" :conn-param="connParam" :serializer-param="input.serializerParam" />
      </el-col>
    </el-row>

  </div>
</template>

<script>
import redis from '@/api/redis'
import RedisSerializerChose from '@/views/monitor/redis/RedisSerializerChose'
import datashow from '@/views/monitor/redis/datashow'

import { printStackTrace } from '@/utils'

export default {
  name: 'Keyscan',
  components: { RedisSerializerChose, datashow },
  props: {
    connParam: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      keyScanResult: {},
      input: {
        search: {
          wildcardLeft: true,
          wildcardRight: true,
          timeout: -1,
          fast: false,
          nodeId: null
        },
        keyScanParam: {
          pattern: null,
          limit: 20,
          cursor: 0
        },
        serializerParam: {
          keySerializer: 'string',
          value: 'string',
          hashKey: 'string',
          hashValue: 'string',
          classloaderName: null
        }
      },
      keyRow: {}
    }
  },
  watch: {
    'input.serializerParam': {
      deep: true,
      handler(val, oldVal) {
        this.$refs.datashow.loadAllData()
      }
    }
  },
  mounted() {

  },
  methods: {
    init() {
      this.scanKey()
    },
    scanKey() {
      const scanTabInput = this.input

      const scanParam = Object.assign({}, scanTabInput.keyScanParam)
      // 如果需要支持模糊, 在key 两边加上 * 号
      if (scanParam.pattern) {
        if (scanTabInput.search.wildcardLeft) {
          scanParam.pattern = '*' + scanParam.pattern
        }
        if (scanTabInput.search.wildcardRight) {
          scanParam.pattern = scanParam.pattern + '*'
        }
      } else {
        scanParam.pattern = '*'
      }
      scanParam.timeout = scanTabInput.search.timeout
      scanParam.fast = scanTabInput.search.fast

      this.loading = true
      redis.scan(this.connParam, scanParam, scanTabInput.serializerParam).then(res => {
        this.loading = false
        this.keyScanResult = res.data
      }).catch(res => {
        this.loading = false
      })
    },
    resetScan() {
      const scanTabInput = this.input

      scanTabInput.search.nodeId = null
      scanTabInput.keyScanParam.cursor = '0'
      this.scanKey()
    },
    dropChoseKeys() {
      const selection = this.$refs.keyScanTable.selection
      if (selection.length === 0) {
        this.$message('选中 key 来删除')
        return
      }
      const keys = selection.map(item => item.key)
      this.$confirm('确定删除 ' + selection.length + ' 个 key 吗,此操作不可逆?', '警告', { type: 'warning' }).then(() => {
        redis.delKeys(this.connParam, keys, this.serializerParam, this.input.serializerParam).then(res => {
          this.scanKey()
        })
      }).catch(() => {})
    },
    readData(row) {
      // this.loadData.keyObj = row;
      // this.$nextTick(() => {
      //   let component = this.$refs['loadData_'+row.type];
      //   if (component){
      //     component.loadData();
      //   }
      // })
      // 添加时间戳, 子模块是监控这个数据查询的, 如果多次点击将不生效
      this.keyRow = Object.assign({}, row, { t: new Date().getTime() })
    },
    nextPage() {
      const scanTabInput = this.input

      scanTabInput.search.nodeId = this.keyScanResult.nodeId
      scanTabInput.keyScanParam.cursor = this.keyScanResult.cursor
      this.scanKey()
    },
    dropKeys(keys) {
      const serializerParam = this.input.serializerParam
      if (keys && typeof keys === 'string') {
        this.$confirm('确定删除 ' + keys + ' 此操作不可逆?', '警告', { type: 'warning' }).then(() => {
          console.log('删除 key', keys)
          redis.delKeys(this.connParam, [keys], serializerParam).then(res => {
            this.scanKey()
          })
        }).catch(() => {
        })
      } else if (keys) {
        this.$confirm('再次确认,将删除' + keys.length + '个 key 此操作不可逆?', '警告', { type: 'warning' }).then(() => {
          redis.delKeys(this.connParam, keys, serializerParam).then(res => {
            this.scanKey()
          })
        }).catch(() => {
        })
      }
    }
  }

}
</script>

<style scoped>
@import "../../../assets/custom-theme/bootstrap.css";

.data-show .panel-body{
  min-height: 370px;
  max-height: 470px;
  overflow-y: scroll
}
</style>
